<template>
  <view class="horizontal">
    <view v-for="(item, index) in list" :key="index" class="horizontal-item" @click="onViewDetail(item)">
      <!-- <image :src="item.cover_img_src" class="horizontal-item-img" /> -->
      <u-image :src="item.cover_img_src" width="100%" height="126" />
      <view class="horizontal-item-tag">
        {{ item.name }}
      </view>
      <view class="horizontal-item-num">
        {{ item.post_num }}回答
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapActions
} from 'vuex'
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    ...mapActions(['setTopicDetail']),
    onViewDetail(data) {
      this.setTopicDetail(data)
      this.$utils.navigateToPage('/pagesTopic/detail')
    }
  }
}
</script>

<style lang="scss" scoped>
	.horizontal {
		display: flex;
		column-gap: 20rpx;
		overflow-y: auto;
		flex-wrap: nowrap;
		box-sizing: border-box;
		padding: 0 20rpx;

		&-item {
			flex-shrink: 0;
			width: 280rpx;
			height: 406rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			display: flex;
			flex-flow: column nowrap;
			box-sizing: border-box;
			padding: 14rpx 14rpx 10rpx;
			justify-content: space-between;

			&-tag {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-top: 10rpx;
				@include text-ellipsis(2);
			}

			&-num {
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
				line-height: 34rpx;
				text-align: center;
				font-style: normal;
				align-self: flex-end;
				margin-top: 6rpx;
			    
			}
		}
	}
</style>
